<template>
    <div class="dibu">
        <router-link tag="div" to="/center/message" active-class="select" >
            <div class="iconfont icon-xiaoxi1 myicon"></div>
            <div class="message">消息</div>
        </router-link>
        <router-link tag="div" to="/center/friend" active-class="select" >
            <div class="iconfont icon-friend myicon tongxun"></div>
            <div class="message">通讯录</div>
        </router-link>
        <router-link tag="div" to="/center/wode" active-class="select" >
            <div class="iconfont icon-wode myicon"></div>
            <div class="message">我的</div>
        </router-link>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Badge } from 'vant';

    Vue.use(Badge);
    export default {
        name: "dibu",
        data(){
            return{

            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .dibu{height: 58px;width: 100%;position: fixed;bottom: 0px;display: flex;flex-direction: row;justify-content: space-around;border: 1px solid #ebebeb;background-color: pink;border-radius: 14px;}
    .dibu>div{display: flex;flex-direction: column;justify-content: space-around;margin-top: 9px;margin-bottom: 5px;}
    .myicon{font-size: 21px;margin-left: 6px;}
    .tongxun{margin-left: 13px;}
    .select{color: #40ca35;}
</style>